<script setup>
import {onMounted, ref} from "vue";
import router from "../router/index.js";
import AgentUse from "./AgentUse.vue";
import api from "../libs/api.js";

const agentList = ref([]);
const activeAgentId = ref(router.currentRoute.value.query.agentId || null);
const selectAgent = ref(null);
onMounted(() => {
  // 列出我可以访问到的智能体
  api.get('/api/v1/agent/custom-list').then(res => {
    agentList.value = (res.data.responseBody?.innerAgents || [])
    if (activeAgentId.value === null) {
      activeAgentId.value = agentList.value[0].id;
      selectAgent.value = agentList.value[0];
      router.replace({
        path: '/agent',
        query: { agentId: activeAgentId.value }
      });
    }else{
      selectAgent.value = agentList.value.find(item => item.id.toString() === activeAgentId.value.toString());
    }
  }).catch(err => {
    console.error('请求错误:', err);
  });
});
const useAgent = (id) => {
  activeAgentId.value = id;
  selectAgent.value = agentList.value.find(item => item.id.toString() === id.toString());
  router.replace({
    path: '/agent',
    query: { agentId: activeAgentId.value }
  });
}
</script>

<template>
  <div class="framework">
    <div class="left-nav">
      <div class="logo">
        <img src="../assets/logo.png" alt="Logo" />
      </div>
      <ul class="nav-list">
        <li class="nav-item" v-for="item in agentList" :key="item.id">
          <div class="nav-item-agent" :class="{active: item.id == activeAgentId}" @click="useAgent(item.id)">
            <img :src="item.icon" alt="Icon" class="nav-item-agent-icon"/>
          </div>
        </li>
      </ul>
    </div>
    <div class="right-content">
      <agent-use :agent="selectAgent" :key="activeAgentId" v-if="selectAgent"/>
    </div>
  </div>
</template>

<style scoped lang="less">
.framework {
  display: flex;
  height: 100%;

  .left-nav {
    width: 50px;
    padding-right: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;


    .logo {
      text-align: center;
      margin-bottom: 20px;

      img {
        width: 40px;
      }
    }

    .nav-list {
      list-style: none;
      padding: 0;

      .nav-item {
        margin-bottom: 10px;

        .nav-item-agent {
          display: flex;
          align-items: center;
          cursor: pointer;
          padding: 5px;
          border-radius: 10px;

          &.active {
            background-color: rgba(0, 123, 255, 0.1);
          }

          .nav-item-agent-icon {
            width: 40px;
            height: 40px;
            //border-radius: 50%;
            //object-fit: cover;
          }
        }
      }
    }
  }

  .right-content {
    flex-grow: 1;
    //padding: 10px;
    //background-color: #fff;
    border-radius: 10px;
    overflow: hidden;
  }
}

</style>
